import React, { Component, Fragment } from 'react';
import { Link } from 'react-router-dom';
import { renderRoutes } from 'react-router-config';
import { Layout, Menu } from 'antd';

import styles from './index.module.less';

export default class User extends Component {
  render() {
    return (
      <div className={styles.userBox}>
        <Layout hasSider style={{ height: 'calc(100vh - 100px)' }}>
          <Layout.Sider
            width={170}
            style={{
              overflow: 'auto',
              height: '100%',
              backgroundColor: '#fff',
            }}
          >
            <Menu
              onClick={this.onMenuSelect}
              style={{ width: 170 }}
              defaultOpenKeys={[ 'accountManagement' ]}
              defaultSelectedKeys={[ 'userInformation' ]}
              mode='inline'
            >
              <Menu.SubMenu key='accountManagement' title='账号管理'>
                <Menu.Item key='userInformation'> <Link to='/seller/user/user-information'>交易资料管理</Link></Menu.Item>
                <Menu.Item key='userMessage'><Link to='/seller/user/account-information'> 账号信息</Link> </Menu.Item>
                <Menu.Item key='userSafety'><Link to='/seller/user/account-security'> 账号安全</Link> </Menu.Item>
                <Menu.Item key='userCenter'><Link to='/seller/user/account-center'>账户中心</Link> </Menu.Item>
                <Menu.Item key='received'>收到的评价</Menu.Item>
              </Menu.SubMenu>
              <Menu.SubMenu key='merchantsCertification' title='商家认证'>
                <Menu.Item key='certification'>企业认证</Menu.Item>
              </Menu.SubMenu>
            </Menu>
          </Layout.Sider>

          <Layout.Content style={{ overflow: 'auto', height: '100%' }}>
            <div style={{ margin: '24px' }}>
              {renderRoutes(this.props.route.routes)}
            </div>
          </Layout.Content>
        </Layout>
      </div>
    );
  }
}
